<template>
  <el-form
    ref="form"
    label-position="right"
    label-width="128px"
    size="mini"
    :disabled="disabled"
    :model="formData"
  >
    <el-form-item v-if="requiredDealTime" label="处理时间" required>
      <el-date-picker
        v-model="formData.createTime"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="datetime"
        align="right"
        :prefix-icon="'null'"
        :clear-icon="'null'"
        class="date-picker"
      />
    </el-form-item>
    <!-- <el-form-item label="原处理人:">
      <span style="color: #879bba">{{
        convertTransHistor(formData.makeHisUserToName)
      }}</span>
    </el-form-item> -->
    <el-form-item label="转交至">
      <el-input
        ref="sendUserInput"
        v-model="selectedSendEngineer.name"
        style="width: auto"
        @focus="handleOpenEngineerPanel"
      />
    </el-form-item>
    <el-form-item label="转交原因">

      <dic-select v-model="formData.processValue" dic-key="obs_trans_reason" type="string" />
    </el-form-item>
    <el-form-item label="转交说明">
      <el-input
        v-model="formData.remark"
        type="textarea"
        :rows="4"
      />
    </el-form-item>
  </el-form>
</template>

<script>
import DicSelect from '@/features/system/dataDictionary/components/dicSelect.vue';
import TicketApi from '@/features/ticket/api';
// import { staffId, } from '@/filters';
import EngineerPanel from '@/features/system/user/drawer/user.vue';
import moment from 'moment';
export default {
  name: 'Forward',
  components: {
    DicSelect,
  },
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    requiredDealTime: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      formData: {
        processValue: '1',
        remark: null,
        // 处理时间
        createTime: null,
      },
      // 指派人信息
      selectedSendEngineer: { name: null,
        id: null,
      },
    };
  },
  mounted() {
    this.formData.createTime = this.formData.createTime = moment().format('YYYY-MM-DD HH:mm:ss');
  },
  methods: {
    async onSubmit(ticketId) {
      await this.$refs.form.validate();
      if ((!this.selectedSendEngineer.teamId) && (!this.selectedSendEngineer.engineerId)) {
        throw new Error('请选择转交人');
      }
      const data = {};
      if (this.selectedSendEngineer.isTeam) {
        data.sendObjId = this.selectedSendEngineer.teamId;
        data.sendObjType = 2;
      } else {
        data.sendObjId = this.selectedSendEngineer.engineerId;
        data.sendObjType = 2;
        data.sendTeam = this.selectedSendEngineer.teamId || null;
        if (data.sendUser === this.userInfo?.userId) {
          data.sendType = 1;
        }
      }
      await TicketApi.transfer({
        ticketId,
        ...this.formData,
        sendTeam: data.sendTeam,
        sendObjId: data.sendObjId,
        sendObjType: data.sendObjType,
      });
    },
    convertTransHistor(val) {
      if (!val) {
        // return staffId(this.selfId);
      } else {
        return val
          .split(',')
          .join('>');
      }
    },
    async handleOpenEngineerPanel() {
      this.$refs.sendUserInput.blur();
      this.$drawer({
        width: '688px',
        component: () => <EngineerPanel onDone={this.handleSelectedEngineer} defaultSelectedData={this.selectedSendEngineer}/>,
      });
    },
    handleSelectedEngineer(data) {
      this.$refs.sendUserInput.blur();
      this.selectedSendEngineer = Object.assign({}, data);
      console.log(this.selectedSendEngineer);
      this.$refs.sendUserInput.blur();
    },
  },
};
</script>

<style lang="scss" scoped>
.date-picker {
  width: 100%;
  ::v-deep .el-input__inner {
    padding: 0 16px;
  }
}
</style>
